<template>
    <div>
          <!-- 1.按钮操作区域 添加 批量删除-->
        <div class="but">
            <el-button size="mini" type="primary" @click="buffer.isShow=true">添加</el-button>
            <el-button size="mini" type="warning">批量删除</el-button>
        </div>
        <!-- 2.数据列表区域 -->
        <list-comp  :specsList="specsList" :params="params" @channel="getSpecsList" @edit="editSpecs" @remove="removeSpecs"></list-comp>
        <!-- 3.表单区域 -->
        <form-comp :buffer="buffer" ref="formRef"  @channel="getSpecsList"></form-comp>
    </div>
</template>

<script>
import listComp from "./components/List.vue"
import formComp from "./components/Form.vue"
export default {

    components: {
        listComp,formComp
    },
    data() {
        return {
            specsList:[],//商品规格列表数据
            params:{//请求参数
                page:1,
                size:5,
                total:0

            },
            buffer:{
                isShow:false
            }
        };
    },
    mounted() {
        //1.获取商品规格
        this.getSpecsList()
    },
    methods: {
        //1.获取商品规格
        getSpecsList(){
            
            //1.1解构获取请求参数
            let {page,size} = this.params
            this.$api.reqSpecsList({page,size})
            .then(res=>{

                this.specsList = res ? res : [];
            })
            .catch(err=>console.log(err))

            // 1.2获取商品的总条数
            this.$api.reqSpecsCount()
             .then(res=>{
                console.log(res);
                this.params.total=res[0].total
            })
            .catch(err=>console.log(err))
        },
        // 2.修改商品规格属性
        editSpecs(info){
            //2.1解构获取编辑数据
            let {index,row} = info
            //2.2处理商品规格值展示
            this.$refs.formRef.attrs = row.attrs.map(item=>({value:item}))
            //2.3赋值给修改表单并展示
            this.$refs.formRef.form = JSON.parse(JSON.stringify(row))
            //2.4弹起窗口
            this.buffer.isShow = true
        },

        removeSpecs(info){
            //3.11解构获取list组件传递的修改数据
            let {index,row} = info
            //3.22提示用户是否删除
            this.$confirm('确定要删除吗?', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            //3.3用户同意删除
            this.$api.reqSpecsRemove({id:row.id})
            .then(res=>{
                //3.4提示删除成功
                this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success'
                });
                //3.5更新列表 重新获取列表数据
                this.getSpecsList()
            })
            .catch(err=>console.log(err))
            
            }).catch(() => {});
                
            }
    },  
};
</script>

<style scoped>
 /* 顶部按钮操作区域样式 */
    .but{
        margin: 20px 0;
    }
</style>
